<template>
  <div>
    <el-steps :active="2" simple>
      <el-step title="课程基础信息" icon="el-icon-edit"></el-step>
      <el-step title="课程大纲" icon="el-icon-upload"></el-step>
      <el-step title="课程发布" icon="el-icon-picture"></el-step>
    </el-steps>
    <el-button
      style="margin:10px"
      type="primary"
      round
      @click="saveChapterButton = true"
      >添加章节</el-button
    >

    <div>
      <el-tree
        :data="tree"
        :props="tree.title"
        show-checkbox
        node-key="id"
        @check-change="handleCheckChange"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <el-button type="text" size="mini" @click="remove(node, data)">
            删除
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="saveOrupdateVideo(node, data)"
          >
            添加
          </el-button>
        </span>
      </el-tree>
    </div>
    <el-button
      style="margin-top: 12px;"
      :disabled="saveBtnDisabled"
      @click="back"
      >上一步</el-button
    >
    <el-button
      style="margin-top: 12px;"
      :disabled="saveBtnDisabled"
      @click="next"
      >下一步</el-button
    >
    <!-- 添加弹框 -->
    <el-dialog title="添加章节" :visible.sync="saveChapterButton">
      <el-form :model="saveChapter">
        <el-form-item label="章节标题">
          <el-input v-model="saveChapter.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input v-model="saveChapter.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveChapterButton = false">取 消</el-button>
        <el-button type="primary" @click="saveOrupdate">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加小节弹框 -->
    <el-dialog title="添加课时" :visible.sync="saveVideoButton">
      <el-form :model="saveVideo">
        <el-form-item label="小节标题">
          <el-input v-model="saveVideo.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="小节排序">
          <el-input v-model="saveVideo.sort" autocomplete="off"></el-input>
        </el-form-item>
        <span>是否免费:</span>
        <el-radio v-model="saveVideo.is_free" label="0">收费</el-radio>
        <el-radio v-model="saveVideo.is_free" label="1">免费</el-radio>
        <el-upload
          class="upload-demo"
          :action="BASE_API_VOD + '/aliyunvod/upload'"
          :on-success="uploadSuccess"
          :on-exceed="uploadBefore"
          :on-remove="uploadRemove"
          :before-remove="uploadRemoveBefore"
          multiple
          :limit="1"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveVideoButton = false">取 消</el-button>
        <el-button type="primary" @click="addVideo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import chapterApi from "@/api/edu/chapter.js";
import courseApi from "@/api/edu/course.js";
export default {
  data() {
    return {
      active: 0,
      saveBtnDisabled: false,
      courseId: "",
      tree: {},
      // 开关
      saveChapterButton: false,
      saveVideoButton: false,
      saveChapter: {
        //添加章节
        title: "",
        sort: 0,
        courseId: this.$route.params.id
      },
      saveVideo: {
        //添加小节
        title: "",
        sort: 0,
        chapterId: "",
        courseId: this.$route.params.id,
        is_free: "0",
        videoSourceId: "",
        videoOriginalName: ""
      },

      // 已选择的
      checkedId: "",
      checkedTitle: "",

      // 上传按钮
      fileList: [],
      BASE_API_VOD: process.env.BASE_API_VOD // 接口API地址
    };
  },
  created() {
    // 获取到路由id
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id;
      // console.log(this.courseId);
      // 根据课程的id来查询章节和小节内容
      this.getOneChapter();
      this.getTree();
    }
  },
  methods: {
    next() {
      this.$router.push({ path: "/Learning/course/publish/" + this.courseId });
    },
    back() {
      this.$router.push({ path: "/Learning/course/info/" + this.courseId });
    },
    // api定义
    // 根据课程的id来查询章节和小节内容
    getOneChapter() {
      chapterApi
        .getOneChapter(this.courseId)
        .then(response => {
          // console.log(response);
        })
        .catch(error => {});
    },

    // tree形式
    getTree() {
      chapterApi
        .getTree(this.courseId)
        .then(response => {
          this.tree = response.data.chapterTree;
          // console.log(this.tree);
        })
        .catch(error => {});
    },
    saveOrupdate() {
      this.saveChapterButton = true;

      this.addChapter();
    },
    addChapter() {
      console.log(this.saveChapter.courseId);
      chapterApi
        .saveChapter(this.saveChapter)
        .then(response => {
          this.getTree();
          this.saveChapterButton = false;
          // console.log(response);
          // 上传后清空弹框
          (this.saveChapter.title = ""), (this.saveChapter.sort = 0);
        })

        .catch(error => {});
    },
    remove(node, data) {
      chapterApi
        .removeChapter(data.id)
        .then(response => {
          console.log(response);
          this.getTree();
        })
        .catch(error => {});
    },
    saveOrupdateVideo(node, data) {
      this.saveVideo.chapterId = data.id;
      this.saveVideoButton = true;
    },

    addVideo() {
      this.saveVideoButton = false;
      this.saveVideo.is_free = parseInt(this.saveVideo.is_free);
      console.log(this.saveVideo);
      chapterApi.saveVideo(this.saveVideo).then(response => {
        console.log(response);
        this.getTree();
      });
    },
    // 获取到已选中的
    handleCheckChange(data, checked, indeterminate) {
      console.log(data);
      this.checkedId = data.id;
      this.checkedTitle = data.title;
      // console.log(this.checkedId);
    },
    // 上传文件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    uploadSuccess(response, file, fileList) {
      this.saveVideo.videoSourceId = response.data.videoId;
      this.saveVideo.videoOriginalName = file.name;
    },
    uploadBefore(file, fileList) {
      this.$message.warning("上传之前");
    },
    // 确认后再执行
    uploadRemove() {
      chapterApi
        .DelectVideo(this.saveVideo.videoSourceId)
        .then(response => {
          console.log(response);
          this.$message({
            type: "success",
            $message: response.message
          });
          this.fileList = [];
          // 删除后 我们要把信息清空
          this.saveVideo.videoSourceId = "";
          this.saveVideo.videoOriginalName = "";
        })
        .catch(error => {
          this.$message({
            type: "error",
            $message: response.message
          });
        });
    },
    // 提示框
    uploadRemoveBefore(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
